{% extends 'task_market/base.html' %}
{% load static %}

{% block title %}
    数据统计
{% endblock %}

{% block content %}

    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        function draw_worker(id, worker, task_applied, task_labeled) {
            var percent = task_labeled * 100 / task_applied
            if (percent < 0 || percent > 100) {
                return;
            }
            var canvas = document.getElementById(id),
                cxt = canvas.getContext('2d'),
                cWidth = canvas.width,
                cHeight = canvas.height,
                baseColor = '#e1e1e1',
                coverColor = '#32B87D',
                PI = Math.PI,
                sR = sR || 1 / 2 * PI; // 默认圆弧的起始点弧度为π/2
            var finalRadian = sR + ((PI + (PI - sR) * 2) * percent / 100); // 红圈的终点弧度
            var step = (PI + (PI - sR) * 2) / 100; // 一个1%对应的弧度大小
            var text = 0; // 显示的数字
            var timer = setInterval(function () {
                cxt.clearRect(0, 0, cWidth, cHeight);
                var endRadian = sR + text * step;
                drawCanvas(cWidth / 2, cHeight / 2, 250, sR, sR + (PI + (PI - sR) * 2), baseColor, 70);
                drawCanvas(cWidth / 2, cHeight / 2, 250, sR, endRadian, coverColor, 70);
                // 画圆头
                // 圆头其实就是一个圆，关键的是找到其圆心，涉及到三角函数知识，自己画个图一看就明了
                var angle = 2 * PI - endRadian; // 转换成逆时针方向的弧度（三角函数中的）
                xPos = Math.cos(angle) * 250 + cWidth / 2; // 红色圆 圆心的x坐标
                yPos = -Math.sin(angle) * 250 + cHeight / 2; // 红色圆 圆心的y坐标
                drawCanvas(xPos, yPos, 2, 0, 2 * PI, coverColor, 80);
                // 数字
                cxt.fillStyle = '#dc3545';
                cxt.font = '100px font-weight-semi-bold mb-1';
                var textWidth = cxt.measureText(text + '%').width;
                cxt.fillText(text + '%', cWidth / 2 - textWidth / 2, cHeight / 2 + 40);
                text++;
                if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {
                    clearInterval(timer);
                }
                cxt.fillStyle = '#32B87D'
                cxt.font = "60px font-weight-semi-bold mb-1"
                var text1 = worker + "申请" + task_applied.toString() + "条"
                var text1m = cxt.measureText(text1)
                cxt.fillText(text1, cWidth / 2 - text1m.width / 2, cHeight / 2 + 400)
                var text2 = "完成" + task_labeled.toString() + "条"
                var text2m = cxt.measureText(text2)
                cxt.fillText(text2, cWidth / 2 - text2m.width / 2, cHeight / 2 + 480)
            }, 30);

            function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
                cxt.beginPath();
                cxt.lineCap = "round";
                cxt.strokeStyle = color;
                cxt.lineWidth = lineWidth;
                cxt.arc(x, y, r, sRadian, eRadian, false);
                cxt.stroke();
            }
        }
    </script>
    <style>
        canvas {
            width: 450px;
            height: 450px;
        }
    </style>

    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bread-inner">
                        <ul class="bread-list">
                            <li><a href="{% url 'task_market:index' %}" target="_blank">主页<i
                                    class="ti-arrow-right"></i></a></li>
                            <li class="active"><a href="#">任务详情查看</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section class="shop section">
        <div>
            <div class="logo">
                <div style="text-align: center;">
                    <h1>任务(ID:{{ id }})共{{ task_count }}条数据</h1><br>
                    <h1>{{ worker_sum }}个工人一共申请了{{ apply_volumn_sum }}条数据</h1>
                </div>
            </div>

            {% for item in result %}
                <div class="container-fluid py-5 col-lg-8">
                    <div class="row align-items-center" style="width: auto; background-color: #f8f9fa; padding: 10px;">
                        <div class="col-lg-5">
                            <canvas id={{ item.Task_applier_id }} width="1400" height="1400"
                                    style="float: right"></canvas>
                            <script>draw_worker({{ item.Task_applier_id }}, "{{item.Name}}", {{ item.Apply_volumn }}, {{ item.Count }})</script>
                        </div>
                        <div class="col-lg-7">
                            <div class="text-left mb-4 mx-auto">
                                <h2>工人{{ item.Name }}标注情况</h2>
                            </div>
                            <ul class="pagination">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
                                    </div>
                                    <table class="table table-borderless">
                                        <tbody>
                                        <tr>
                                            <th style="font-size: 25px;">任务内容</th>
                                            <th style="font-size: 25px;">任务结果</th>
                                        </tr>
                                        {% for data in item.Data_List|slice:":5" %}
                                            <tr>
                                                {#                                             {% if task.task_type == '1' or task.task_type == '2' or task.task_type == '3' %}#}
                                                {#                                            <td>{{ data.taskdata_content|truncatechars:50 }}</td>#}
                                                {#                                            {% elif task.task_type == '5' or task.task_type == '4' %}#}
                                                {#                                            <td><img src="/images/{{ data.taskdata_content }}" width="60" height="10"></td>#}
                                                {#                                            {% endif %}#}
                                                {% if task.task_type == '1' %}
                                                    <td style="font-size: 15px; width: 190px; border-bottom: 1px dashed #000;">{{ data.0 }}</td>
                                                    <td style="font-size: 15px; width: 200px; border-bottom: 1px dashed #000;">{{ data.1|truncatechars:20 }}</td>
                                                {% elif task.task_type == '4' or task.task_type == '5' %}
                                                    <td style="font-size: 15px; width: 190px; border-bottom: 1px dashed #000;">
                                                        <img src="/images/{{ data.0 }}" width="60"></td>
                                                    <td style="font-size: 15px; width: 200px; border-bottom: 1px dashed #000;">{{ data.1|truncatechars:20 }}</td>
                                                {% endif %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </ul>
                        </div>
                    </div>
                </div>
            {% endfor %}

        </div>
    </section>

{% endblock %}